/** Base Styles */
:root {

    /**
     * Colors
     * --------------------------------------------------------------------- */
    --c-bg: #fff;
    --c-bg-semi: rgba(255,255,255,0.8);
    --c-bg-secondary: #f3f5f7;

    --c-white: #ffffff;
    --c-black: #000000;

    --c-divider-light: rgba(60, 60, 67, .12);
    --c-divider-dark: rgba(84, 84, 88, .48);

    --c-text-light-1: #2c3e50;
    --c-text-light-2: #476582;
    --c-text-light-3: #90a4b7;

    --c-brand: #2e859c;
    --c-brand-active: #2c7f95;
    --c-brand-dark: #00586e;
    --c-brand-light: #52b1cc;

    --c-disabled-bg: #e5e5e5;
    --c-disabled-fg: #666;

    --code-bg-color: #f8f8f8;
    --code-inline-bg-color: rgba(27, 31, 35, .04);
    --code-highlight: rgba(0, 0, 0, .04);

    /**
     * Typography
     * --------------------------------------------------------------------- */

    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;

    /**
     * Z Indexes
     *
     * Algolia SearchBox has a z-index of 200, so make sure not to go above
     * that value.
     * --------------------------------------------------------------------- */

    --z-index-navbar: 10;
    --z-index-sidebar: 6;

    /**
     * Shadows
     * --------------------------------------------------------------------- */

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
    --shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
    --shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);

    /**
     * Sizes
     * --------------------------------------------------------------------- */

    --header-height: 3.6rem;
    --sidebar-width: 17.5rem;
    --scrollbar-width: 6px;

    --pwa-logo-p: #3e3e3e;
}

html.dark {

    --c-bg: #111;
    --c-bg-semi: rgba(17,17,17,0.8);
    --c-bg-secondary: #222;
    --c-text: #f5f7fa;
    --c-text-light: #f9f9f9;
    --c-text-lighter: #ffffff;

    --c-divider-light: rgba(200, 200, 200, .12);
    --c-divider-dark: rgba(200, 200, 200, .48);
    --code-bg-color: #191919;
    --code-inline-bg-color: rgba(255, 255, 255, .04);
    --code-highlight: rgba(0, 0, 0, .66);

    --c-brand: #4AA6C0;
    --c-brand-active: #3392ac;
    --c-brand-dark: #00586e;
    --c-brand-light: #52b1cc;

    --c-disabled-bg: #333;
    --c-disabled-fg: #aaa;

    --pwa-logo-p: #b9b9b9;
}

/** Fallback Styles */
:root {
    --c-divider: var(--c-divider-light);

    --c-text: var(--c-text-light-1);
    --c-text-light: var(--c-text-light-2);
    --c-text-lighter: var(--c-text-light-3);

    --c-bg: var(--c-white);

    --code-line-height: 24px;
    --code-font-family: var(--font-family-mono);
    --code-font-size: 14px;

    --pwa-logo-w: var(--c-brand);
}
